<template>
<!--  v-if="imgList[0].picUrl"-->
  <div class="detail-banner">
    <div class="banner" @click="toShow">
      <img :src="tripsItem.imgList[0].picUrl" alt="">
    </div>
    <div class="mask" v-show="isShow" @click.stop="toHide">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="item in tripsItem.imgList" :key="item.id">
          <img :src="item.picUrl" alt="">
        </swiper-slide>
      </swiper>
      <div class="swiper-pagination" slot="pagination"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailBanner",
  props: {
    tripsItem: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      isShow: false,
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction'
        },
        loop:true
      }
    }
  },
  methods: {
    toShow() {
      this.isShow = true
    },
    toHide() {
      this.isShow = false
    }
  }
}
</script>

<style scoped>
  .banner {
    width: 100%;
    height: 5rem;
    overflow: hidden;
  }
  .banner img {
    width: 100%;
  }
  .mask {
    position: fixed;
    left: 0;
    bottom: 0;
    background: #000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
  }
  .mask img {
    width: 100%;
  }
  .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 1rem;
    left: 0;
    width: 100%;
    color: #fff;
    font-size: .36rem;
  }
</style>
